<h1>Consulta de Productos</h2>
<p>Por Categorias</p>
<p>Al hacer click en una celda o click al icono vista se presenta debajo una lista con 
los productos asociados a la categoria principal</p>
<div id='log'></div>
<script>
	/*
		MUY IMPORTANTE:
		Tu CActiveDataProvider debe proveer esta configuracion:
			'keyAttribute'=>'idcategoria',
		para que  var idcategoria = $.fn.yiiGridView.getSelection('categorias');
		devuelva un valor de seleccion.
	*/
	function mostrarDetalles(){
		// no olvides configurar tu CActiveDataProvider con: 'keyAttribute'=>'idcategoria',
		var idcategoria = $.fn.yiiGridView.getSelection('categoria');
		$.fn.yiiGridView.update('producto',{ data: idcategoria });
	}
</script>


<?php



Yii::app()->clientScript->registerScript('search', "
$('.search-button').click(function(){
	$('.search-form').toggle();
	return false;
});
$('.search-form form').submit(function(){
	$('#producto-grid').yiiGridView('update', {
		data: $(this).serialize()
	});
	return false;
});
");


$this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'categoria',
	'selectableRows'=>1,
	'selectionChanged'=>'mostrarDetalles',	// via 1: para mostrar detalles al seleccionar
    'dataProvider'=>$dataProvider,
    'columns'=>array(
		// nota que con htmlOptions se puede personalizar el tamano de la columna
        array('name'=>'idCategoria','htmlOptions'=>array('width'=>'80px')),
		// nota que aqui no se usa array, sino directamente el nombre de la columna
        'nombre',

		// via 2: para mostrar detalles al hacer click en un icono.
        array(
            'class'=>'CButtonColumn',
			'template' => '{detallarproducto}',
			'buttons' => array(
					'detallarproducto'=>array(
						'label'=>'ver productos',
						//'imageUrl'=>'images/demo1/view.png',
						//'click'=>'js:mostrarDetalles',
					),
				),
        ),
    ),
));
$this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'producto',
	'dataProvider'=>$dataProviderProductos,
    //'filter'=>$model,
    'columns'=>array(
        'idProducto',
		'idCategoria',
        'nombre',
    ),
));
?>